<template>
	<div style="width:1200px;height:500px;">
	<at-treemap
	style="width:100%;height:100%"
	:jsonData="jsonDataObj"
	@config="trcon"
	@tmClick="treeMethod">
	</at-treemap>
	</div>

</template>

<script>
	export default{
		data() {
	      return {
	        jsonDataObj:{
    			'first':{
    				'firstChild1':{
    					'$value':100
    				},
    				'firstChild2':{
    					'$value':300
    				},
    				'firstChild3':{
    					'$value':400
    				},
    				'firstChild4':{
    					'$value':200
    				},
    				'firstChild5':{
    					'$value':500
    				},
    				'firstChild6':{
    					'$value':700
    				},
    			},
    			'second':{
    				'secondChild1':{
    					'$value':1100
    				},
    				'secondChild2':{
    					'$value':200
    				},
    				'secondChild3':{
    					'$value':700
    				},
    				'secondChild4':{
    					'$value':80
    				},
    				'secondChild5':{
    					'$value':200
    				},
    				'secondChild6':{
    					'$value':400
    				},
    			},
    			'third':{
    				'thirdChild1':{
    					'$value':100
    				},
    				'thirdChild2':{
    					'$value':100
    				},
    				'thirdChild3':{
    					'$value':400
    				},
    				'thirdChild4':{
    					'$value':50
    				},
    				'thirdChild5':{
    					'$value':20
    				},
    				'thirdChild6':{
    					'$value':300
    				},
    			},
    			'fourth':{
    				'fourthChild1':{
    					'$value':600
    				},
    				'fourthChild2':{
    					'$value':400
    				},
    				'fourthChild3':{
    					'$value':400
    				},
    				'fourthChild4':{
    					'$value':260
    				},
    				'fourthChild5':{
    					'$value':400
    				},
    				'fourthChild6':{
    					'$value':100
    				},
    			},
    			'fifth':{
    				'fifthChild1':{
    					'$value':600
    				},
    				'fifthChild2':{
    					'$value':500
    				},
    				'fifthChild3':{
    					'$value':400
    				},
    				'fifthChild4':{
    					'$value':300
    				},
    				'fifthChild5':{
    					'$value':200
    				},
    				'fifthChild6':{
    					'$value':100
    				},
    			},
    			'sixth':{
    				'sixthChild1':{
    					'$value':100
    				},
    				'sixthChild2':{
    					'$value':200
    				},
    				'sixthChild3':{
    					'$value':300
    				},
    				'sixthdChild4':{
    					'$value':400
    				},
    				'sixthChild5':{
    					'$value':500
    				},
    				'sixthChild6':{
    					'$value':600
    				},
    			},

    		},


	      };
	    },
	    computed:{

	    },
	    methods:{
	    	treeMethod(params){
	    		console.log(params,'params')
	    		console.log('11111')
	    	},
	    	trcon(myChart,treeData){
	    		console.log(myChart,'my')
	    		console.log(treeData,'td')
	    		myChart.setOption({
			        title: {
			            text: 'ECharts 配置项查询分布',
			            subtext: '2016/04',
			            left: 'leafDepth'
			        },
			        tooltip: {},
			        series: [{
			            name: 'option',
			            type: 'treemap',
			            visibleMin: 300,
			            data: treeData.children,
			            leafDepth: 1,
			            levels: [
			                {
			                    itemStyle: {
			                        normal: {
			                            borderColor: '#555',
			                            borderWidth: 4,
			                            gapWidth: 4
			                        }
			                    }
			                },
			                {
			                    colorSaturation: [0.3, 0.6],
			                    itemStyle: {
			                        normal: {
			                            borderColorSaturation: 0.7,
			                            gapWidth: 2,
			                            borderWidth: 2
			                        }
			                    }
			                },
			                {
			                    colorSaturation: [0.3, 0.5],
			                    itemStyle: {
			                        normal: {
			                            borderColorSaturation: 0.6,
			                            gapWidth: 1
			                        }
			                    }
			                },
			                {
			                    colorSaturation: [0.3, 0.5]
			                }
			            ]
			        }]
			    })
	    	}
	    },

	}
</script>
<style>
</style>